<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- <link rel="stylesheet" href="/febs/vue/element-ui-index.css"> -->
  <link rel="stylesheet" href="/febs/vue/vxe-table-style.css">
  <script src="/febs/vue/vue.js"></script>
  <script src="/febs/vue/axios.min.js"></script>
  <!-- <script src="/febs/vue/element-ui-index.js"></script> -->
  <script src="/febs/vue/xe-utils.js"></script>
  <script src="/febs/vue/vxe-table.js"></script>
  <script src="/febs/vue/jquery.js"></script>
</head>

<body>
  <div id="app" class="layui-fluid w-app">
    <div style="display: flex;justify-content: space-around;margin-bottom:10px">
      <div>流程名称:{{tableData[0].flowName}}</div>
      <div>流程编码:{{tableData[0].basestdNo}}</div>
    </div>

    <vxe-table border show-header-overflow highlight-hover-row resizable :align="allAlign" :data="tableData">
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="flowDesc" title="签核流程" min-width="120"></vxe-table-column>
      <vxe-table-column field="toUserCname" min-width="120" title="签核人员"></vxe-table-column>
      <vxe-table-column field="chkDate" title="签核时间" min-width="160"></vxe-table-column>
      <vxe-table-column field="chkStatusName" min-width="120" title="签核状态"></vxe-table-column>
    </vxe-table>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        allAlign: null,
        tableData: []
      }
    },
    created() {
      axios.get('/approvals/signDetails', {
        params: {
          orderNo: JSON.parse(sessionStorage.parameterData).orderNo
        }
      })
        .then(response => {
          console.log(response);
          this.tableData = response.data.data
          let wheight = (this.tableData.length ? this.tableData.length + 2 : this.tableData.length + 3) * 48 + 20
          $(".layui-layer").css("top", ($(window).height() - wheight) / 2)
        })
        .catch(error => {
          console.log(error);
        })
    }
  })
</script>

<style>
  .w-app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    padding: 0px 15px 15px 15px;
    background: #ffffff !important;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  th,
  td {
    padding: 4px 4px;
  }

  .main-table,
  .main-table th,
  .main-table td {
    border-collapse: collapse;
    border: 1px solid #000;
  }

  .total>td {
    padding: 6px 4px;
  }

  .horizontal-sign {
    margin-top: 30px;
  }

  .sign {
    border-bottom: 1px solid #000;
    width: 200px;
  }

  .text-16px {
    font-size: 16px;
  }
</style>

</html>